<template>
    <a-tabs :active-key="active" @change="tabchange">
        <a-tab-pane key="1">
      <span slot="tab">
        <a-icon type="apple"/>
        总览
      </span>
            <div class="loverRow" style="background-color: #ececec; padding: 20px;flex-basis: 100%">

                <a-card hoverable style="width: 300px;display: inline-block;margin: 10px;
                border-radius: 10px;"
                        v-for="(lover,index) in loverList" :key="index">
<!--                    <img style="border-radius: 10px"-->
<!--                            slot="cover"-->
<!--                            alt="example"-->
<!--                            :src=lover.pic-->
<!--                    />-->

                        <img style="padding-right: 28px;" :src="lover.pic" :key="lover.pic" width="280"   v-viewer>

                    <a-card-meta :title=lover.name style="margin-top: 10px">
                        <template slot="description">
                            {{lover.price}}
                        </template>
                    </a-card-meta>
                </a-card>

            </div>

        </a-tab-pane>
        <a-tab-pane key="2">
      <span slot="tab">
        <a-icon type="android"/>
        详情
      </span>
            <div class="result">
                <a-table :columns="columns" :data-source="loverList">
                    <div slot="id" slot-scope="id" @click="onDetail(id)">
                        <!--                    <a-tag color="#2db7f5" @click="$router.push('/Detail')">-->
                        <a-tag color="#2db7f5">
                            {{id}}
                        </a-tag>
                    </div>
                    <img slot="pic" slot-scope="pic" :src="pic">


                    <span slot="action" slot-scope="text, record">
                     <a>Invite 一 {{ record.name }}</a>
                    <a-divider type="vertical"/>
                     <a>Delete</a>
                    <a-divider type="vertical"/>
                    <a class="ant-dropdown-link"> More actions <a-icon type="down"/> </a>
                </span>
                </a-table>
            </div>

        </a-tab-pane>
        <a-tab-pane key="3">
      <span slot="tab">
        <a-icon type="search"/>
        探花
      </span>

                <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
                    <a-form-item label="芳名">
                        <a-input
                                v-decorator="['name', { rules: [{ required: false, message: '客官想找哪位一亲芳泽啊？' }] }]"
                        />
                    </a-form-item>
                    <a-form-item label="类型">
                        <a-select
                                v-decorator="[
          'type',
          { rules: [{ required: false, message: '请选择你喜欢的类型？' }] },
        ]"
                                placeholder="选择一个喜欢的类型吧"
                                @change="handleSelectChange"
                        >
                            <a-select-option value="空姐">
                                空姐
                            </a-select-option>
                            <a-select-option value="明星">
                                明星
                            </a-select-option>
                            <a-select-option value="少妇">
                                少妇
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
                        <a-button type="primary" html-type="submit">
                            探花
                        </a-button>
                        <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
                            Clear
                        </a-button>
                    </a-form-item>
                </a-form>

        </a-tab-pane>
        <a-tab-pane key="4" tab="查询结果">
            <div class="loverRow" style="background-color: #ececec; padding: 20px;flex-basis: 100%">

                <a-card hoverable style="width: 480px;display: inline-block;margin: 20px;border-radius: 10px"
                        v-for="(lover,index) in resultList" :key="index">
                    <img style="border-radius: 10px"
                         slot="cover"
                         alt="example"
                         :src=lover.pic
                    />
                    <a-card-meta :title=lover.name>
                        <template slot="description">
                          价位：  {{lover.price}}
                            <br>
                            类型：  {{lover.type}}
                        </template>

                    </a-card-meta>
                </a-card>

            </div>
        </a-tab-pane>
        <a-tab-pane key="5" tab="浏览">
            <viewer :images="loverList">
                <img v-for="src in loverList" :src="src.pic" :key="src.pic"  width="300">
            </viewer>

        </a-tab-pane>
        <a-tab-pane key="6" tab="美女图册">
            <div class="loverRow" style="background-color: #ececec; padding: 20px;flex-basis: 100%" v-if="!showGirl">

                <a-card hoverable style="width: 300px;display: inline-block;margin: 10px;
                border-radius: 10px;"
                        v-for="(lover,index) in girlList" :key="index" >


                    <img style="padding-right: 28px;" :src="lover.imgPath" :key="lover.pic" width="280"   v-viewer>

                    <a-card-meta :title=lover.pathName style="margin-top: 10px" @click="higirl(lover)" >
                        <template slot="description">
                            {{lover.size}}
                        </template>
                    </a-card-meta>
                </a-card>

            </div>
            <div v-else>
                <viewer :images="resultList">
                    <img v-for="src in resultList" :src="src" :key="src"  width="300">
                </viewer>
            </div>

        </a-tab-pane>
    </a-tabs>
</template>


<script>
    var girlId;
    import screenfull from "screenfull";
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            slots: {title: 'id'},
            scopedSlots: {customRender: 'id'}

        },
        {
            title: '头像',
            dataIndex: 'pic',
            key: 'pic',
            slots: {title: 'pic'},
            scopedSlots: {customRender: 'pic'}
        },

        {
            title: '芳名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '价格',
            dataIndex: 'price',
            key: 'price',
        },
        {
            title: '生日',
            dataIndex: 'birthday',
            key: 'birthday',
        },

    ];
    export default {
        name: "index",
        data() {
            return {
                loverList: [],
                columns,
                formLayout: 'horizontal',
                form: this.$form.createForm(this, { name: 'coordinated' }),
                active:'1',
                resultList:[],
                girlList:[],
                showGirl:false
            };
        },
        mounted() {
            let result = this.$http.get('http://localhost:8080/lover/all')
                .then(response => {
                        console.log(response.data)
                        this.loverList = response.data
                        console.log(this.loverList)
                    }
                )

            this.$http.get("http://localhost:8080/lover/girl")
            .then(res=>{
                this.girlList=res.data
            })
        },
        methods: {
            handleSubmit(e) {


                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        console.log('Received values of form: ', values);
                        this.$http.get('http://localhost:8080/lover/query',
                            {
                                params:{
                                    name:values.name,
                                    type:values.type
                                }
                            })

                            .then(response => {
                                    console.log(response.data)
                                    this.resultList = response.data
                                if (this.resultList.length > 0) {
                                    this.active="4"
                                    this.handleReset()
                                }else {
                                    // this.$message.loading('Sorry,没有满足你条件的佳丽', 2000);
                                    const hide = this.$message.loading('Sorry,没有满足你条件的佳丽', 0);
                                    setTimeout(hide, 2500);
                                    this.handleReset()
                                }

                                }
                            )
                    }
                });
            },

            handleReset() {
                this.form.resetFields();
            },
            handleSelectChange(value) {
                console.log(value);
                this.form.setFieldsValue({
                    note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
                });
            },
            tabchange(e){
                console.log("tab change",e)
                this.active=e
               if(e==5){
                   screenfull.request()
                   console.log("screenfull full")
               }else {
                   screenfull.exit()
               }
                if (e != 6) {
                    this.showGirl=false
                    this.resultList=[]
                }

            },
            higirl(e) {
                console.log("higirl",e)
              this.resultList=e.imgsName
                console.log(this.resultList)
                 this.showGirl=true

            }
        },
    }
</script>

<style scoped>
    .result {
        margin: 30px;
        width: 80%;
    }

    .result img {
        width: 100px;
        height: 100px;
        border-radius: 10px;
    }
</style>